<md-dialog aria-label="{{ 'ADMINCONSOLE.DIALOG.PASSWORD.TITLE_ARIA' | translate }}"
           style="max-width: 800px">
    <form name="vm.passwordForm" novalidate ng-submit="vm.ok()" style="overflow: initial;" layout-padding>

        <md-dialog-content layout="column" layout-align="start stretch" layout-padding style="overflow: hidden;">

            <div>
                <h2 ng-show="vm.enable && !vm.passwordRequired">{{ 'ADMINCONSOLE.DIALOG.PASSWORD.TITLE_SET' | translate }}</h2>
                <h2 ng-show="vm.enable && vm.passwordRequired">{{ 'ADMINCONSOLE.DIALOG.PASSWORD.TITLE_CHANGE' | translate }}</h2>
                <h2 ng-hide="vm.enable">{{ 'ADMINCONSOLE.DIALOG.PASSWORD.TITLE_REMOVE' | translate }}</h2>
            </div>

            <div layout="column">

                <!-- OLD PASSWORD -->
                <div layout="row" ng-if="vm.passwordRequired">
                    <div flex="60" flex-xs="100">
                        <md-input-container md-theme="eBlockerThemeInput" style="width: 100%;">
                            <label>{{'ADMINCONSOLE.DIALOG.PASSWORD.LABEL_CURRENT_PASSWORD' | translate }}</label>
                            <input name="currentPassword" ng-model="vm.credentials.currentPassword" type="password" md-maxlength="vm.maxLength" required>
                            <div ng-messages="vm.passwordForm.currentPassword.$error" ng-if="vm.passwordForm.$submitted || vm.passwordForm.currentPassword.$touched">
                                <div ng-message="required">{{ 'ADMINCONSOLE.DIALOG.PASSWORD.ERROR.CURRENT_PASSWORD_REQUIRED' | translate }}</div>
                                <div ng-message="passwordInvalid">{{ 'ADMINCONSOLE.DIALOG.PASSWORD.ERROR.CURRENT_PASSWORD_INVALID' | translate }}</div>
                                <div ng-message="md-maxlength">{{ 'ADMINCONSOLE.DIALOG.PASSWORD.ERROR.PASSWORD_TOO_LONG' | translate }}</div>
                            </div>
                        </md-input-container>
                    </div>
                </div>

                <!-- NEW PASSWORD -->
                <div layout="row" layout-xs="column" ng-if="vm.enable">
                    <div flex="60" flex-xs="100">
                        <md-input-container md-theme="eBlockerThemeInput" style="width: 100%;">
                            <label>{{'ADMINCONSOLE.DIALOG.PASSWORD.LABEL_NEW_PASSWORD' | translate }}</label>
                            <input name="newPassword" ng-model="vm.credentials.newPassword" type="password" md-maxlength="vm.maxLength" required>
                            <div ng-messages="vm.passwordForm.newPassword.$error" ng-if="vm.passwordForm.$submitted || vm.passwordForm.newPassword.$touched">
                                <div ng-message="required">{{ 'ADMINCONSOLE.DIALOG.PASSWORD.ERROR.NEW_PASSWORD_REQUIRED' | translate }}</div>
                                <div ng-message="md-maxlength">{{ 'ADMINCONSOLE.DIALOG.PASSWORD.ERROR.PASSWORD_TOO_LONG' | translate }}</div>
                            </div>
                        </md-input-container>
                    </div>
                    <div flex="40" flex-xs="100" layout="column" layout-align="start center" style="min-height: 40px">
                        <span style="font-size: 12px;">{{'ADMINCONSOLE.DIALOG.PASSWORD.STRENGTH' | translate}}</span>
                        <ul id="strength" password-quality="vm.credentials.newPassword" style="margin: 0; padding: 0;"></ul>
                    </div>
                </div>

                <!-- REPEAT PASSWORD -->
                <div layout="row" ng-if="vm.enable">
                    <div flex="60" flex-xs="100">
                        <md-input-container md-theme="eBlockerThemeInput" style="width: 100%;">
                            <label>{{'ADMINCONSOLE.DIALOG.PASSWORD.LABEL_REPEAT_PASSWORD' | translate }}</label>
                            <input name="repeatPassword" ng-model="vm.credentials.repeatPassword" type="password" ng-maxlength="vm.maxLength" required>
                            <div ng-messages="vm.passwordForm.repeatPassword.$error" ng-if="vm.passwordForm.$submitted || vm.passwordForm.repeatPassword.$touched">
                                <div ng-message="required">{{ 'ADMINCONSOLE.DIALOG.PASSWORD.ERROR.REPEAT_PASSWORD_REQUIRED' | translate }}</div>
                                <div ng-message="mustMatch">{{ 'ADMINCONSOLE.DIALOG.PASSWORD.ERROR.REPEAT_PASSWORD_MISMATCH' | translate }}</div>
                            </div>
                        </md-input-container>
                    </div>
                </div>
            </div>
        </md-dialog-content>

        <md-dialog-actions layout="row"
                           layout-align="end center"
                           layout-xs="column"
                           layout-align-xs="center center"
                           style="padding-right: 16px;">
            <md-button type="button" ng-click="vm.cancel()" class="md-raised md-secondary"  ng-disabled="vm.processing">{{ 'ADMINCONSOLE.DIALOG.PASSWORD.ACTION.CANCEL' | translate }}</md-button>
            <md-button type="submit" class="md-raised md-primary md-accent" ng-disabled="vm.processing || (vm.doConfirm && !vm.confirmed)">
                {{ 'ADMINCONSOLE.DIALOG.PASSWORD.ACTION.OK' | translate }}
            </md-button>
        </md-dialog-actions>
    </form>
</md-dialog>
